<template>
  <view class="recharge-box">
    <view class="residue">剩余短信：{{ messageInfo.smsCount || 0 }}</view>

    <view class="form-box">
      <view class="form-input">
        <text style="width: 160rpx">短信签名：</text>
        <div v-if="messageInfo.smsCheckFlag === 2" style="font-size: 35rpx">{{ messageInfo.smsSign }}</div>
        <div v-else style="border-bottom: 1px solid #c3c3c3">
          <u-input placeholder="请输入内容" v-model="messageInfo.smsSign">
            <template slot="suffix">
              <u-button text="保存签名" type="primary" @click="sumSign" />
            </template>
          </u-input>
        </div>
      </view>
    </view>

    <view class="amount">
      <view @click="pay(item)" class="item" v-for="(item, index) in amountData" :key="index">
        <view class="price">
          {{ item.money }}
          <text style="font-size: 20rpx">元</text>
        </view>
        <view class="desc">{{ item.count }}条{{ item.gift ? '+ 赠送' + item.gift + '条' : '' }}</view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { refillPay } from '@/utils/payment.js';
import { getRechargeInfoAPI, submitApplyAPI } from '@/common/modules/recharge.js';
export default {
  name: 'rechargeMsg',
  data() {
    return {
      amountData: [],
      messageInfo: {
        smsCount: 0
      }
    };
  },
  onLoad() {
    this.getRechargeInfo();
  },
  onShow() {},
  methods: {
    async getRechargeInfo() {
      let _this = this;
      const res = await getRechargeInfoAPI();

      this.messageInfo = res.data.detail;
      this.amountData = res.data.list;
    },
    async sumSign() {
      // 保存签名
      await submitApplyAPI({
        id: this.messageInfo.storeId,
        smsSign: this.messageInfo.smsSign
      });
      this.$refs.uToast.show({
        type: 'success',
        message: '保存成功，等待审核',
        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
        position: 'top'
      });
    },
    async pay(item) {
      // 充值
      await refillPay({ money: item.money, smsCount: item.count + item.gift });
      this.getRechargeInfo();
    }
  }
};
</script>

<style lang="scss">
.recharge-box {
  .residue {
    padding: 20rpx;
    text-align: center;
  }

  .form-box {
    padding: 20rpx;

    .form-input {
      display: flex;
      align-items: center;
    }
  }

  .amount {
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;

    .item {
      box-sizing: border-box;
      border-radius: 5rpx;
      border: 2rpx solid #e7e8e9;
      width: 30%;
      height: 200rpx;
      margin-left: 3%;
      margin-bottom: 20rpx;
      padding: 30rpx 20rpx 0;
      text-align: center;

      .price {
        font-size: 40rpx;
        color: #39a7e8;
      }

      .desc {
        padding-top: 10rpx;
        line-height: 30rpx;
        color: #f56c6c;
        font-size: 24rpx;
      }
    }
  }
}
</style>
